<template>
  <div class="rate-picture">
    <div class="img-box">
      <div class="img-con" v-for="(item, i) in pictureList" :key='i'>
        <img :src="item" class="item">
        <img src="./del.png" class="icon" @click="del(i)" onclick="return false"/>
      </div>

      <div class="picture-box" v-if="pictureList.length < size">
        <img src="./upload.png" class="picture"/>
        <input type="file" class="photo" @change="changeImage($event)"
               accept="image/*"/>
      </div>
    </div>
  </div>
</template>

<script>
  import {getBase64} from "../config/util"

  export default {
    props: {
      size: {
        type: Number,
        default: 6
      },
      itemList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        picture: "",
        pictureList: [],
      }
    },
    mounted() {
      this.pictureList = this.itemList;
    },
    methods: {
      changeImage(e) {
        if (e.target.files.length > 0) {
          getBase64(e.target, (url) => {
            this.picture = 'data:image/png;base64,' + url;//显示图片
            this.pictureList.push(this.picture);
            this.imgChange();
          });
        }
      },
      del(index) {//删除图片
        this.pictureList.splice(index, 1);
        this.imgChange();
      },
      imgChange() {
        this.$emit('uploadImg', this.pictureList);
      }
    },
    watch: {
      itemList(newVal) {
        this.pictureList = newVal;
      }
    },
  }
</script>

<style lang="less" scoped>
  @import "../assest/mixin";

  .rate-picture {
    display: flex;
    margin: 0 auto;
    .wh(93.6%, auto);
    .img-box {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-left: auto;
      padding-left: 1.8rem;
      .img-con {
        .wh(2.4rem, 2.4rem);
        position: relative;
        padding-bottom: 0.15rem;
        margin-right: 0.12rem;
        &:nth-child(3n) {
          margin-right: 0;
        }
        .item {
          .wh(100%, 100%);
          border-radius: 0.08rem;
        }
        .icon {
          position: absolute;
          top: -0.15rem;
          right: -0.15rem;
          z-index: 99;
          .wh(0.48rem, 0.48rem);
        }

      }
      .picture-box {
        position: relative;
        .photo {
          position: absolute;
          top: 0;
          opacity: 0;
          -ms-filter: 'alpha(opacity=0)';
          z-index: 999;
          .wh(2.4rem, 2.4rem);
        }
        .picture {
          .wh(2.4rem, 2.4rem);
          border-radius: 0.08rem;
        }
      }
    }
  }
</style>
